<template>
  <div class="container">
    <el-dialog v-model="state.dialog.isShowDialog" :title="state.dialog.titleObj[state.dialog.type]"
      label-position="top" width="800px">
      <el-form ref="dialogFormRef" :model="state.ruleForm" :rules="state.ruleRules" label-width="auto">
        <el-form-item label="用户名称:" prop="user_name">
          <el-input v-model="state.ruleForm.user_name" placeholder="请输入" clearable :disabled="isDisabledFn" />
        </el-form-item>
        <el-form-item label="公司名称:" prop="company">
          <el-input v-model="state.ruleForm.company" placeholder="请输入" clearable :disabled="isDisabledFn" />
        </el-form-item>
        <el-form-item label="手机号:" prop="phone">
          <el-input v-model="state.ruleForm.phone" placeholder="请输入" clearable :disabled="isDisabledFn" />
        </el-form-item>
        <el-form-item label="邮箱:" prop="email">
          <el-input v-model="state.ruleForm.email" placeholder="请输入" clearable :disabled="isDisabledFn" />
        </el-form-item>
        <el-form-item label="行业预估时间:" prop="estimated_order_time">
          <el-date-picker v-model="state.ruleForm.estimated_order_time" type="datetime" placeholder="选择日期时间"
           format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" seconds-picker />
        </el-form-item>
        <el-form-item label="行业:" prop="industry">
          <el-input v-model="state.ruleForm.industry" placeholder="请输入" clearable :disabled="isDisabledFn" />
        </el-form-item>
        <el-form-item label="需求为何不能满足:" prop="demand_desc">
          <el-input v-model="state.ruleForm.demand_desc" placeholder="请输入" clearable :disabled="isDisabledFn" />
        </el-form-item>
        <el-form-item label="需求解决办法:" prop="requirement_solution">
          <el-input v-model="state.ruleForm.requirement_solution" placeholder="请输入" clearable
            :disabled="isDisabledFn" />
        </el-form-item>
        <el-form-item label="线索类型:" prop="lead_type">
          <el-select v-model="state.ruleForm.lead_type" style="width: 100%" placeholder="请选择" clearable filterable
            :disabled="isDisabledFn">
            <el-option v-for="item in state.clueTypeArr" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="线索状态:" prop="status">
          <el-radio-group v-model="state.ruleForm.status">
            <el-radio v-for="(item, index) in state.clueStatusArr" :key="index" :label="item.value">
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item> -->
        <el-form-item label="线索文件:" prop="files">
          <UploadFile v-model="state.ruleForm.files" :value="state.ruleForm.files" @uploadfile="onUploadHead"
            :isImg="false" :limit="9" />
        </el-form-item>
      </el-form>
      <template v-if="!isDisabledFn" #footer>
        <span class="dialog-footer">
          <el-button @click="onCancel" size="default">取 消</el-button>
          <el-button type="primary" size="default" @click="onSubmit">保 存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="addMsg">
import { reactive, onMounted, computed, defineAsyncComponent } from 'vue';
import { updateSalesLeads, addsalesleads } from '/@/api/project/index';
import { clueTypeArr, accountStatusArr, navArr } from '/@/commmon/variate';
import { UploadFilled } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

const UploadFile = defineAsyncComponent(() => import('/@/components/Upload/file.vue'));

const emit = defineEmits(['updateList']);
const state = reactive({
  clueTypeArr: clueTypeArr,
  clueStatusArr: navArr.slice(1),
  accountStatusArr: accountStatusArr,
  ruleForm: {
    user_name: '',
    company: '',
    phone: '',
    email: '',
    files: [],
    lead_type: '',
    is_designed: '',
    status: '',
    estimated_order_time: '',
    industry: '',
    demand_desc: '',
    requirement_solution: ''
  },
  ruleRules: {},
  dialog: {
    isShowDialog: false,
    row: null,
    type: '',
    titleObj: {
      'view': '查看',
      'edit': '编辑',
      'add': '新增'
    },
    isDisabled: false
  },
  loading: false,
  originalFiles: {},
})

const onUploadHead = (data) => {
  console.log(data, "data");

  const arrS = JSON.parse(JSON.stringify(state.ruleForm.files))
  const arrN = []
  if (data.length) {
    data.forEach((itom) => {
      console.log(itom, "0000000");
      const resData = itom.response;
      console.log(resData, "resData");
      if (resData && resData.data.length) {
        resData.data.forEach((item) => {
          console.log(item, "item+++");
          arrN.push({
            name: item.name,
            url: item.oss_upload_files_path
          })
        })
      }
    })
    state.ruleForm.files = arrS.concat(arrN)
    console.log(state.ruleForm.files, "state.ruleForm.files");
  }
}
const extractFileNam = (url) => {
  const match = url.match(/\/([^/]+)\.\w+$/);
  return match ? match[1] : null;
}

const onSubmit = async () => {
  const filesArr = state.ruleForm.files.length ? JSON.parse(JSON.stringify(state.ruleForm.files)) : []
  const urlsArr = []
  if (filesArr.length) {
    filesArr.forEach((item) => {
      urlsArr.push(item.url)
    })
  }
  const params = {
    ...state.ruleForm,
  }
  if (state.dialog.type === 'add') {
    addsalesleads(params).then((res) => {
      if (res.code === 10000) {
        onCancel()
        emit('updateList')
        ElMessage.success(res.msg);
      }
    })
  } else {
    updateSalesLeads(params).then((res) => {
      if (res.code === 10000) {
        onCancel()
        emit('updateList')
        ElMessage.success(res.msg);
      }
    })
  }
}

const openDialog = (type, row) => {
  const typeArr = ['edit', 'view'];
  state.dialog.row = row;
  state.dialog.type = type;
  closeDialog();
  if (row && typeArr.includes(type)) {
    const findType = state.clueTypeArr.find(item => item.label === row.lead_type);
    const leadTypeValue = findType ? findType.value : '';
    state.ruleForm = {
      ...state.ruleForm,
      id: row.id,
      user_name: row.user_name,
      company: row.company,
      phone: row.phone,
      email: row.email,
      status: row.status,
      lead_type: leadTypeValue,
      is_designed: row.is_designed?.toString() || '',
      files: row.files ? row.files : [],
      estimated_order_time: row.estimated_order_time,
      industry: row.industry,
      demand_desc: row.demand_desc,
      requirement_solution: row.requirement_solution
    }
  }
  state.dialog.isShowDialog = true;
};

const closeDialog = () => {
  state.ruleForm = {
    user_name: '',
    company: '',
    phone: '',
    email: '',
    files: [],
    lead_type: '',
    is_designed: '',
    status: '',
    estimated_order_time: '',
    industry: '',
    demand_desc: '',
    requirement_solution: ''
  }
};

const onCancel = () => {
  closeDialog();
  state.dialog.isShowDialog = false;
};

onMounted(() => { })
const isDisabledFn = computed(() => {
  return state.dialog.type === 'view'
})
defineExpose({
  openDialog,
})
</script>
<style scoped lang="scss">
.dialog-footer {
  display: flex;
  align-items: center;
  justify-content: center;
}

:deep(.el-form-item__content) {
  display: block;
}
</style>
